<template>
  <view class="total-wrap" :style="{marginTop: isMainNode?'20rpx':'10rpx'}">
    <view class="node-container">
      <view class="node-container-left">
        <view class="tag-container">
          <img v-if="isMainNode" :src="nodeIconUrl" />
          <view v-else class="node-tag-container">
            <view class="node-tag"></view>
          </view>
        </view>
        <view class="line-container" :style="{height: isMainNode?'100rpx':'80rpx', paddingTop: isMainNode?'22rpx':'8rpx'}">
          <view v-if="!isFirst" class="line" :style="{height: isMainNode?'100rpx':'80rpx'}"></view>
        </view>
      </view>
      <view class="node-container-right" :style="{paddingTop: isMainNode?'0':'8rpx'}">
        <view v-if="isMainNode" class="node-title" :style="{color: isNewest?'#222':'#999'}">{{nodeData.desc}}</view>
        <!-- <view class="node-desc" :style="{color: isNewest?'#4b4b4b':'#999', marginTop: isMainNode?'10rpx':'0'}">{{nodeData.desc}}</view> -->
				<view class="node-desc" :style="{color: isNewest?'#4b4b4b':'#999', marginTop: isMainNode?'10rpx':'0'}" v-for="(data,i) in nodeData.order_goods_express" :key="i">{{data.desc}}</view>
        <view class="node-time">{{nodeData.add_time}}</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    isNewest: {
      type: Boolean,
      default: false
    },
    isFirst: {
      type: Boolean,
      default: false
    },
    isMainNode: {
      type: Boolean,
      default: false
    },
    nodeData: {
      type: Object,
      default () {
        return {
          add_time: '',
          desc: '',
          express_id: '',
          order_id: '',
          step: ''
        }
      }
    }
  },
  computed: {
    nodeIconUrl () {
      if (this.nodeData.desc === '已下单') {
        return this.isNewest ? 'https://master.shengejiaju.cn/web/static/icons/status/01_hover.png':'https://master.shengejiaju.cn/web/static/icons/status/01.png'
      } else if (this.nodeData.desc === '商家已确认') {
        return this.isNewest ? 'https://master.shengejiaju.cn/web/static/icons/status/02_hover.png':'https://master.shengejiaju.cn/web/static/icons/status/02.png'
      } else if (this.nodeData.desc === '平台已确认') {
        return this.isNewest ? 'https://master.shengejiaju.cn/web/static/icons/status/03_hover.png':'https://master.shengejiaju.cn/web/static/icons/status/03.png'
      } else if (this.nodeData.desc === '工厂已确认') {
        return this.isNewest ? 'https://master.shengejiaju.cn/web/static/icons/status/04_hover.png':'https://master.shengejiaju.cn/web/static/icons/status/04.png'
      } else if (this.nodeData.desc === '工厂已接单') {
        return this.isNewest ? 'https://master.shengejiaju.cn/web/static/icons/status/04_hover.png':'https://master.shengejiaju.cn/web/static/icons/status/04.png'
      } else if (this.nodeData.desc === '已揽件') {
        return this.isNewest ? 'https://master.shengejiaju.cn/web/static/icons/status/05_hover.png':'https://master.shengejiaju.cn/web/static/icons/status/05.png'
      } else if (this.nodeData.desc === '已出库') {
        return this.isNewest ? 'https://master.shengejiaju.cn/web/static/icons/status/06_hover.png':'https://master.shengejiaju.cn/web/static/icons/status/06.png'
      } else if (this.nodeData.desc === '已签收') {
        return this.isNewest ? 'https://master.shengejiaju.cn/web/static/icons/status/07_hover.png':'https://master.shengejiaju.cn/web/static/icons/status/07.png'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.total-wrap {
  margin-top: 22rpx;
  width: 100%;
  .node-container {
    width: 100%;
    height: auto;
    display: flex;
    &-left {
      width: 44rpx;
      height: auto;
      .tag-container {
        width: 44rpx;
        height: 44rpx;
        img {
          width: 44rpx;
          height: 44rpx;
        }
        .node-tag-container {
          width: 44rpx;
          height: 44rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          .node-tag {
            width: 14rpx;
            height: 14rpx;
            background-color: #dcdcdc;
            border-radius: 50%;
          }
        }
      }
      .line-container {
        box-sizing: border-box;
        width: 44rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .line {
          width: 2rpx;
          background-color: #dcdcdc;
        }
      }
    }
    &-right {
      flex: 1;
      box-sizing: border-box;
      padding: 0 10rpx 0 24rpx;
      .node-title {
        width: 100%;
        height: 40rpx;
        line-height: 44rpx;
        color: #222;
        font-size: 28rpx;
        font-family: 'PingFangSC-Medium';
      }
      .node-desc {
        margin-top: 16rpx;
        width: 100%;
        min-height: 30rpx;
        line-height: 30rpx;
        color: #222;
        font-size: 24rpx;
        font-family: 'PingFangSC-Regular';
        word-wrap: break-word;
        word-break: normal;
      }
      .node-phone {
        margin-top: 8rpx;
        width: 100%;
        height: 26rpx;
        line-height: 26rpx;
        color: #FE4E2C;
        font-size: 26rpx;
        font-family: 'Avenir-Medium';
      }
      .node-time {
        margin-top: 12rpx;
        width: 100%;
        height: 34rpx;
        line-height: 34rpx;
        color: #999;
        font-size: 24rpx;
        font-family: 'Avenir-Book';
      }
    }
  }
}
</style>